<!-- eslint-disable -->
<template>
  <div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" @close="dialogClose" width="550px" :close-on-click-modal="false">
      <el-form :model="form" ref="form" class="dialog-form" @submit.native.prevent>
        <el-form-item label="科室名称" :label-width="formLabelWidth"
          prop="name"
          :rules="[
            { required: true, message: '请输入科室名称', trigger: 'blur' }
          ]">
          <el-input size="medium" type="text" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="排序（大到小）" :label-width="formLabelWidth"
          prop="sorts"
          :rules="[
            { required: true, message: '请输入排序（大到小）', trigger: 'blur' }
          ]">
          <el-input size="medium" type="number" v-model="form.sorts"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="medium" type="primary" @click="addData('form')" :loading="loadingAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<!-- eslint-disable -->
<script>
  import {DepartmentAdd} from '@/utils/request.js'

  export default {
    components: {  },
    name: 'departmentForm',
    data(){
      return {
        dialogTitle: '新增科室',
        dialogFormVisible: false,
        formLabelWidth: '100px',
        loadingAdd: false,
        form: {
          id: 0,
          name: '',
          sorts: '0',
        },

      }
    },
    created() {

    },
    methods: {
      dialogClose() {
        this.initForm()
      },
      editTmp(row) {
        this.form = {
          id: row.id,
          name: row.name,
          sorts: row.sorts,
        }
        this.dialogTitle = this.form.id > 0 ? '编辑科室' : '新增科室'
        this.dialogFormVisible = true
      },
      addData(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loadingAdd = true
            DepartmentAdd(this.form).then((res) => {
              if (res.code == 0) {
                this.$message.success(res.msg);
                this.$emit('refreshPage')
                this.dialogFormVisible = false
              } else {
                this.$message.error(res.msg);
              }
              this.loadingAdd = false
            })
          }
        });
      },
      initForm() {
        this.form = {
          id: 0,
          name: '',
          sorts: '0',
        }
        this.$refs['form'].resetFields()
        this.dialogTitle = '新增科室'
      },

    }
  }
</script>

<style scoped>
  >>>.el-dialog__body {
    /* padding-right: 50px !important; */
    /* max-height: 500px; */
    /* overflow-y: scroll; */
  }

  
</style>
